<template>
	<view class="container">
		<scroll-view class="scroll-view" scroll-y :scroll-top="scrollTop" @scrolltolower="loadMore">
			<view class="list-container">
				<view class="list-item" @click="Empower(item)" v-for="(item, index) in list" :key="index">
					记录时间: {{ item.createTime }}
				</view>
			</view>
		</scroll-view>
		<u-popup :show="show" mode='center' @close="close">
			<view class="showimg">
				<image :src="QRCodes" mode=""></image>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		pageTemplate,
		pageTemplateList
	} from "@/request/api.js"
	export default {
		data() {
			return {
				show: false,
				list: [], // 列表数据
				scrollTop: 0, // 滚动条位置
				pageNo: 1, // 当前页码
				QRCodes: '',
				pageNum: null

			};
		},
		mounted() {
			this.getList();
		},
		methods: {
			close() {
				this.show = false
			},
			Empower(e) {
				pageTemplate({
					url: getApp().globalData.url + '/' + e.codeUrl
				}).then(rest => {
					if (rest.success) {
						this.show = true
						this.QRCodes = 'data:image/png;base64,' + rest.result;
					}
					console.log(rest);
				})
			},
			// 模拟异步获取列表数据
			getList() {
				pageTemplateList({
					memberId: JSON.parse(uni.getStorageSync('userInfo')).id,
					pageNum: this.pageNo,
					pageSize: 10
				}).then(res => {
					console.log(res);
					this.pageNum = res.result.total
					// 判断是否是最后一页
					if (res.success) {
						this.list = this.list.concat(res.result.records);
						this.pageNum = res.result.total
					}
				})
			},
			// 上拉加载更多
			loadMore() {
				if (this.pageNum <= this.list.length) {
					uni.showToast({
						title: '已加载全部数据',
						icon: "none"
					});
				} else {
					this.pageNo++;
					this.getList()
				}
				console.log(1);
			},
		}
	};
</script>

<style scoped>
	.showimg {
		border-radius: 20rpx;
		overflow: hidden;
	}

	image {
		width: 600rpx;
		height: 600rpx;
	}

	.container {
		height: 100vh;
		box-sizing: border-box;
	}

	.scroll-view {
		height: 100vh;
		flex: 1;
	}

	.list-container {
		box-sizing: border-box;
	}

	.list-item {
		margin: 20rpx;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;
	}
</style>